<template>
    <div id="app" class="harness">
        <div class="harnessNav">
            <div>
                <div><span class="glyphicon glyphicon-gift"></span></div>
                <div>套餐管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-gift"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    套餐管理
                </div>
            </div>
        </div>
        <div class="harnDeta">
            <div class="harnNav">
                <div class="seek"></div>
                <div class="add" @click="addPopupClick">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="detail" v-loading.body="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div>套餐名称</div>
                        <div>库存数量</div>
                        <div>充值金额</div>
                        <div>赠送金额</div>
                        <div>创建时间</div>
                        <div class="delHarn">操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>{{item.gname}}</div>
                        <div>{{item.inventory}}</div>
                        <div>{{item.price}}</div>
                        <div>{{item.presentation}}</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div class="delHarn">
                            <template>
                                <el-button class="elbut" type="text" @click="delClick(index)">
                                    <span class="glyphicon glyphicon-trash"></span>删除
                                </el-button>
                            </template>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加套餐弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}">
            <transition name="slide-fade">
                <div class="addMain" v-show="isAddShow" v-loading.body="adding" element-loading-text="正在添加中...">
                    <div>
                        <h2>添加套餐</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>套餐名称：</div>
                        <div><input type="text" v-model="harnObj.gname" placeholder="请输入套餐名称"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>库存数量：</div>
                        <div><input type="text" v-model="harnObj.inventory" placeholder="请输入库存数量"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>充值金额：</div>
                        <div><input type="text" v-model="harnObj.price" placeholder="请输入充值金额"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>赠送金额：</div>
                        <div><input type="text" v-model="harnObj.presentation" placeholder="请输入赠送金额"></div>
                    </div>
                    <div class="promptS">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="addClick" class="addClick">添加</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'harness',
        data() {
            return {
                promptStr: '',
                items: [],
                itemDates: [],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                loading: false,
                adding: false,
                nullShow: true,
                isAddPopup: true,
                isAddShow: false,
                isShowAdd: true,
                harnObj: {
                    gname: '',
                    price: '',
                    inventory: '',
                    presentation: '',
                    ctime: ''
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')

        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            }
        },
        methods: {
            // 汉字正则
            strReg: function (str) {
                var regu = /[\u4E00-\u9FA5]{1,10}/g
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 货币正则
            moneyReg: function (str) {
                // var regu = /^[1-9]*[1-9][0-9]*(.[0-9]{1,2})?$|^(0.[1-9]{1,2})$/
                var regu = /[^/d]/
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.loading = true
                self.pageSizeNum = val;
                self.getGoodAll({
                    pageSize: val,
                    number: 1
                }).then((data) => {
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getGoodAll({
                    pageSize: this.pageSizeNum,
                    number: val
                }).then((data) => {
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            // 初始化分页
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 显示添加套餐弹出框
            addPopupClick() {
                this.isShowAdd = false
                this.isAddShow = true
                this.promptStr = ''
            },
            // 取消添加套餐弹出框
            calladd() {
                this.isShowAdd = true
                this.isAddShow = false
            },
            // 添加套餐
            addClick() {
                var userId = sessionStorage.getItem('userId')
                var self = this;
                var nameTrue = this.strReg(this.harnObj.gname)
                var reserveTrue = this.moneyReg(this.harnObj.presentation)
                var upTrue = this.moneyReg(this.harnObj.price)
                var sendTrue = this.moneyReg(this.harnObj.inventory)
                if (nameTrue == true && reserveTrue == true && upTrue == true && sendTrue == true) {
                    self.adding = true
                    self.getGoodAdd({
                        price: self.harnObj.price,
                        presentation: self.harnObj.presentation,
                        inventory: self.harnObj.inventory,
                        gname: self.harnObj.gname,
                        opid: userId
                    }).then((data) => {
                        if (data.data.code == "200") {
                            self.adding = false
                            self.isShowAdd = true
                            self.isAddShow = false
                            self.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            self.harnObj.gname = ''
                            self.harnObj.presentation = ''
                            self.harnObj.price = ''
                            self.harnObj.inventory = ''
                            self.loading = true
                            self.getGoodAll({
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {

                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (nameTrue != true) {
                        this.promptStr = '套餐名称只能为中文'
                    } else if (reserveTrue != true) {
                        this.promptStr = '库存数量格式不对，只能为整数'
                    } else if (upTrue != true) {
                        this.promptStr = '充值金额格式不对，只能为整数'
                    } else if (sendTrue != true) {
                        this.promptStr = '赠送金额格式不对，只能为整数'
                    }
                }
            },
            // 删除套餐
            delClick(index) {
                var self = this;
                self.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var userId = sessionStorage.getItem('userId')
                    self.getGoodDel({
                        opid: userId,
                        id: self.items[index].id,
                    }).then((data) => {
                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getGoodAll({
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {
                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.numberOfElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
         ...mapActions(['getGoodAll','getGoodAdd','getGoodDel'])
        }
    }

</script>

<style scoped src="../../assets/css/harness.css">

</style>